<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>

        <script>

            //前端的webSocket对象
            var webSocket=null;
            //跟服务器建立连接
            webSocket=new WebSocket("ws://127.0.0.1:8080/websocket/socketServer");

            //服务器推送消息到客户端时触发
            webSocket.onmessage=function(ev){
                $("#tx1").append(ev.data+"\n");
            }


            function send(){
                var msg=$("#tx2").val();

                //客户端发送聊天消息到服务器（相当于Servlet中发送请求给服务器）
                webSocket.send(msg);

                $("#tx2").val("");
            }

        </script>

    </head>
    <body class="easyui-layout" style="width: 800px;height: 600px;">




        <div data-options="regin:'center',title:'聊天窗口'" style="padding: 5px;">

            <table>

                <tr>
                    <td>
                        <textarea rows="25" cols="80" id="tx1" readonly="true"></textarea>
                    </td>
                </tr>

                <tr>
                    <td>
                        <textarea rows="8" cols="80" id="tx2"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button type="button" onclick="send();">发送</button>
                    </td>
                </tr>

            </table>

        </div>

    </body>
</html>